<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="./../home.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="content">
        <div class="col-lg-12">
            <h3 class="page-header" id="comercio">
                Asignar Can
            </h3>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-sm-2">
                                <h:panelGroup>
                                    <h:button value="Nueva Asignación" styleClass="btn btn-primary" outcome="create.xhtml"/>
                                </h:panelGroup>
                            </div>
                        </div>
                        <p:spacer height="10" />
                        <h:form id="frmSerenoLst">
                            <f:event type="preRenderView" listener="#{serenoPerroBean.initLista()}"/>
                            <p:dataTable value="#{serenoPerroBean.serenosperros}" var="listSp" paginator="true" rows="10" lazy="true" rowIndexVar="rowIndex"
                                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                         emptyMessage="No hay serenos resgitrados">
                                <p:column style="text-align: center;">
                                    <f:facet name="header">
                                        #
                                    </f:facet>
                                    <h:outputText value="#{rowIndex+1}" />
                                </p:column>
                                <p:column style="text-align: left;">
                                    <f:facet name="header">
                                        Nombre de Sereno
                                    </f:facet>
                                    <h:outputText value="#{listSp.sereno.nombre} #{listSp.sereno.apellido}" />
                                </p:column>
                                <p:column style="text-align: left;">
                                    <f:facet name="header">
                                        Nombre de Can
                                    </f:facet>
                                    <h:outputText value="#{listSp.perro.nombre}" />
                                </p:column>
                                <p:column style="text-align: center;">
                                    <p:commandButton icon="icon-update" action="#{serenoPerroBean.irActualizar(listSp.spk)}"/>
                                    <p:commandButton value="E" actionListener="#{serenoPerroBean.captura(listSp.spk.sereno.id , listSp.spk.perro.id)}" oncomplete="confirmation.show();" title="Eliminar" />
                                </p:column>
                            </p:dataTable>

                            <p:confirmDialog widgetVar="confirmation" severity="alert"  message="¿Desea eliminar esta asignación  ?" header="Eliminar"  >  
                                <h:form>
                                    <p:commandButton value="Si" update=":frmSerenoLst" actionListener="#{serenoPerroBean.eliminarSerenoPerro}" oncomplete="confirmation.hide();" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>  
                                    <p:commandButton value="No" onclick="confirmation.hide();" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>       
                                </h:form>
                            </p:confirmDialog>
                        </h:form>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>

</ui:composition>
